<template>
	<view>
		<!-- 筛选 -->
		<view class="filter">
		  <text class="active">综合</text>
		  <text>销量</text>
		  <text>价格{{total}}</text>
		</view>
	<scroll-view class="goods" scroll-y @scrolltolower="getMore">
		<!-- 遍历 -->
		
		<view
			class="item"
			v-for="item in list"
			:key="item.goods_id"
			@click="goDetail(item.goods_id)">
			<!-- 商品图片 -->
			<image class="pic" :src="item.goods_small_logo" />
			<!-- 商品信息 -->
			<view class="meta">
				<view class="name">{{ item.goods_name }}</view>
				<view class="price">
					<text>￥</text>{{ item.goods_price }}
					<text>.00</text>
				</view>
			</view>
		</view>
		
		<view class="nomore" v-if="total>0 && total>list.length">没有更多数据...</view>
	</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				total: 0,
				list: [],
				queryData: {
				  pagenum: 1,
				  query: ''
				}
			}
		},
		onLoad(params) {
			console.log(params)
			this.queryData.query = params.query
			
			this.getList()
		},
		methods: {
			getMore() {
				// 加载更多
				if ( this.total === this.list.length ) return
				this.queryData.pagenum++
				this.getList()
			},
			goDetail(id) {
				uni.navigateTo({
					url: "/packone/goods/index?id=" + id
				})
			},
			  // methods
			async getList() {
				const {data} = await this.$request({
					url: "goods/search",
					data: this.queryData
				});
				this.total =data.total
				this.list.push(...data.goods)
			}
		}
	}
</script>

<style scoped lang="scss">
.filter {
  display: flex;
  height: 96rpx;
  line-height: 96rpx;
  border-bottom: 1rpx solid #ddd;

  /* #ifdef H5 */
  position: relative;
  z-index: 99;
  /* #endif */

  text {
    flex: 1;
    text-align: center;
    font-size: 30rpx;
    color: #333;

    &.active {
      color: #ea4451;
    }
  }
}

.goods {
  position: absolute;
  width: 100%;
  top: 97rpx;
  bottom: 0;
}

.item {
  display: flex;
  padding: 30rpx 20rpx 30rpx 0;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;

  &:last-child {
    border-bottom: none;
  }

  .pic {
    width: 200rpx;
    height: 200rpx;
    margin-right: 30rpx;
  }

  .meta {
    flex: 1;
    font-size: 27rpx;
    color: #333;
    position: relative;
  }

  .name {
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  .price {
    position: absolute;
    bottom: 0;

    color: #ea4451;
    font-size: 33rpx;

    text {
      font-size: 22rpx;
    }
  }
}
</style>
